<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar title="黑马头条-登录" />
    <!-- 表单 -->
    <!--
      onSubmit: 所有的表单项都通过校验时会自动执行的回调 并且通过回调参数可以收集到
      用户输入的数据
      v-model: 双向绑定 收集用户的输入数据
      rules: 定义校验规则的位置 外层数组 内层是对象 每一个对象都代表一条规则
      native-type="submit" 这行代表配合@submit事件进行工作 点击按钮的时候会自动
      触发submit事件 从而可以进行兜底校验的工作 并且收集用户输入的信息
    -->
    <!--
      登录业务实现
      1. 按照业务要求的规则做表单校验
      2. 按照接口文档封装接口函数
      3. 兜底校验通过之后调用接口
      4. 登录成功之后的后续逻辑  [跳转首页 + 提示用户]
     -->
    <!--
      token: 多个模块中都需要用到  .vue .js -> vuex
      vuex管理数据的一般模式
      1. 在vuex中编写管理数据的通用模版[state 同步mutation 异步action]
      2. 找一个合适的地方触发action函数
      action -> 接口调用 -> token -> 提交mutation -> token存入state
      -->
    <van-form @submit="onSubmit">
      <!-- 用户名 -->
      <van-field
        :required="true"
        v-model="form.mobile"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[
          {
            required: true,
            message: '请填写用户名',
            trigger: 'onChange',
            pattern: /^1[3456789]\d{9}$/,
          },
        ]"
      />
      <!-- 密码 -->
      <van-field
        :required="true"
        v-model="form.code"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码', pattern: /^\d{6}$/ }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'login-index',
  data () {
    return {
      form: {
        mobile: '13811111111',
        code: '246810'
      }
    }
  },
  methods: {
    async onSubmit (form) {
      console.log('表单提交了', form)
      // 这个方法只有表单通过校验之后才会执行
      // 触发action
      // 1. 映射函数 mapActions  2.this.$store.dispatch
      // dispatch函数本身执行之后的结果依旧是一个promise
      try {
        await this.$store.dispatch('asyncLogin', this.form)
        // 业务逻辑 vuex维护是数据逻辑 如果是和数据没有关系纯业务处理
        // 业务组件中去做
        // 思考:如果首页某些模块需要用到token数据才不报错 能保证先有token再跳转吗？
        const redirect = this.$route.query.redirect
        if (redirect) {
          this.$router.push(redirect)
        } else {
          this.$router.push('/')
        }

        // 提示用户成功了
        Toast('登录成功')
      } catch (error) {
        Toast.fail(error.response.data.message)
      }
    }
  }
}
</script>
